export const mainshow = {
  methods: {

    //折线图---新(平均湿度统计)
    lineChart_wd(ele,xAxis_data,series_data) {
      var chart = this.$echarts.init(document.querySelector(ele));
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "rgb(193, 191, 191)"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["平均温度"],
          x: "center",
          borderWidth: 0,
          padding: 10,
          textStyle: {
            color: "rgb(155, 152, 152)",
            fontSize: 14
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              show: false
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            },
            dataZoom: {
              show: false
            },
            mark: {
              show: false
            }
          },
          showTitle: false
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            scale: false,
            boundaryGap: false,
            data: xAxis_data,
            axisLabel: {
              textStyle: {
                color: "rgb(155, 147, 147)"
              },
              formatter:(params) => {  //格式化数据的函数
                return  parseInt(params) + '小时';
              },
            },
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "(℃)",
            nameTextStyle: {
              color: "rgb(196, 234, 252)",
              fontSize: 12
            },
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(173, 173, 173)",
                fontSize: 12
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "rgb(20,68, 82)"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            name: "平均温度(℃)",
            data: series_data
          }
        ],
        color: ["rgb(88, 230, 234)", "rgb(120, 191, 232)", "rgb(80, 168, 176)", "#32cd32", "rgb(78, 130, 219)",],

      };

      chart.setOption(option);
      var index = 0; //播放所在下标
      setInterval(function() {
        chart.dispatchAction({
          type:'showTip',//默认显示的提示框
          seriesIndex: 0,//这行不能省
          dataIndex: index
        });
        index++;
        if(index > 30) {
          index = 0;
        }
      }, 3000);

    },

    //柱状图 (平均温度统计)
    pillarChart(ese,pillar_xAxis_data,pillar_series_data) {
      var myChart = this.$echarts.init(document.querySelector(ese));

      var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["平均温度(℃)"],
          textStyle: {
            color: "rgb(155, 152, 152)",
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: {
              readOnly: true
            },
            magicType: {
              type: ["line", "bar"],
              show: false
            }
          }
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            data: pillar_xAxis_data,
            axisLabel: {
              textStyle: {
                color: "rgb(155, 147, 147)"
              },
              formatter:(params) => {  //格式化数据的函数
                return  parseInt(params) + '小时';
              },
            },
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgb(173, 173, 173)",
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgb(20,68, 82)"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
          }
        ],
        series: [
          {
            name: "平均温度",
            type: "bar",
            data: pillar_series_data,
            tooltip: {
              borderWidth: 1
            }
          }
        ],
        color: ["rgb(0, 191, 191)", "rgb(120, 191, 232)", "rgb(80, 168, 176)"]


      };
      myChart.setOption(option);
    },
    //折线图---新(平均湿度统计)
    lineChartN_02(ele,xAxis_data,series_data) {
      var chart = this.$echarts.init(document.querySelector(ele));
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "rgb(193, 191, 191)"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["平均CO2(ppm)"],
          x: "center",
          borderWidth: 0,
          padding: 10,
          textStyle: {
            color: "rgb(155, 152, 152)",
            fontSize: 14
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              show: false
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            },
            dataZoom: {
              show: false
            },
            mark: {
              show: false
            }
          },
          showTitle: false
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            scale: false,
            boundaryGap: false,
            data: xAxis_data,
            axisLabel: {
              textStyle: {
                color: "rgb(155, 147, 147)"
              },
              formatter:(params) => {  //格式化数据的函数
                return  parseInt(params) + '小时';
              },
            },
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "(ppm)",
            nameTextStyle: {
              color: "rgb(196, 234, 252)",
              fontSize: 12
            },
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(173, 173, 173)",
                fontSize: 12
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "rgb(20,68, 82)"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            name: "平均Co2(ppm)",
            data: series_data
          }
        ],
        color: ["rgb(88, 230, 234)", "rgb(120, 191, 232)", "rgb(80, 168, 176)", "#32cd32", "rgb(78, 130, 219)",],

      };

      chart.setOption(option);
      var index = 0; //播放所在下标
      setInterval(function() {
        chart.dispatchAction({
          type:'showTip',//默认显示的提示框
          seriesIndex: 0,//这行不能省
          dataIndex: index
        });
        index++;
        if(index > 30) {
          index = 0;
        }
      }, 3000);

    },
    //折线图---新(平均湿度统计)
    lineChartN_pm25(ele,xAxis_data,series_data) {
      var chart = this.$echarts.init(document.querySelector(ele));
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "rgb(193, 191, 191)"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["平均PM2.5(ug/m³)"],
          x: "center",
          borderWidth: 0,
          padding: 10,
          textStyle: {
            color: "rgb(155, 152, 152)",
            fontSize: 14
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              show: false
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            },
            dataZoom: {
              show: false
            },
            mark: {
              show: false
            }
          },
          showTitle: false
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            scale: false,
            boundaryGap: false,
            data: xAxis_data,
            axisLabel: {
              textStyle: {
                color: "rgb(155, 147, 147)"
              },
              formatter:(params) => {  //格式化数据的函数
                return  parseInt(params) + '小时';
              },
            },
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "（ug/m³）",
            nameTextStyle: {
              color: "rgb(196, 234, 252)",
              fontSize: 12
            },
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(173, 173, 173)",
                fontSize: 12
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "rgb(20,68, 82)"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            name: "平均PM2.5(ug/m³)",
            data: series_data
          }
        ],
        color: ["rgb(88, 230, 234)", "rgb(120, 191, 232)", "rgb(80, 168, 176)", "#32cd32", "rgb(78, 130, 219)",],

      };

      chart.setOption(option);
      var index = 0; //播放所在下标
      setInterval(function() {
        chart.dispatchAction({
          type:'showTip',//默认显示的提示框
          seriesIndex: 0,//这行不能省
          dataIndex: index
        });
        index++;
        if(index > 30) {
          index = 0;
        }
      }, 3000);

    },



    //折线图---新(平均湿度统计)
    lineChartN_sd(ele,xAxis_data,series_data) {
      var chart = this.$echarts.init(document.querySelector(ele));
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "rgb(193, 191, 191)"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["平均CO2(ppm)"],
          x: "center",
          borderWidth: 0,
          padding: 10,
          textStyle: {
            color: "rgb(155, 152, 152)",
            fontSize: 14
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              show: false
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            },
            dataZoom: {
              show: false
            },
            mark: {
              show: false
            }
          },
          showTitle: false
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            scale: false,
            boundaryGap: false,
            data: xAxis_data,
            axisLabel: {
              textStyle: {
                color: "rgb(155, 147, 147)"
              },
              formatter:(params) => {  //格式化数据的函数
                return  parseInt(params) + '小时';
              },

            },
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "（RH）",
            nameTextStyle: {
              color: "rgb(196, 234, 252)",
              fontSize: 12
            },
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(173, 173, 173)",
                fontSize: 12
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "rgb(20,68, 82)"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            name: "平均湿度(RH)",
            data: series_data
          }
        ],
        color: ["rgb(88, 230, 234)", "rgb(120, 191, 232)", "rgb(80, 168, 176)", "#32cd32", "rgb(78, 130, 219)",],

      };

      chart.setOption(option);
      var index = 0; //播放所在下标
      setInterval(function() {
        chart.dispatchAction({
          type:'showTip',//默认显示的提示框
          seriesIndex: 0,//这行不能省
          dataIndex: index
        });
        index++;
        if(index > 30) {
          index = 0;
        }
      }, 3000);

    },


    //折线图---新(平均VOC统计)
    lineChartN_voc(ele,xAxis_data,series_data) {
      var chart = this.$echarts.init(document.querySelector(ele));
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "rgb(193, 191, 191)"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["平均CO2(ppm)"],
          x: "center",
          borderWidth: 0,
          padding: 10,
          textStyle: {
            color: "rgb(155, 152, 152)",
            fontSize: 14
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              show: false
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            },
            dataZoom: {
              show: false
            },
            mark: {
              show: false
            }
          },
          showTitle: false
        },
        calculable: false,
        xAxis: [
          {
            type: "category",
            scale: false,
            boundaryGap: false,
            data: xAxis_data,
            axisLabel: {
              textStyle: {
                color: "rgb(155, 147, 147)"
              },
              formatter:(params) => {  //格式化数据的函数
                return  parseInt(params) + '小时';
              },
            },
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "（ppm）",
            nameTextStyle: {
              color: "rgb(196, 234, 252)",
              fontSize: 12
            },
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#48b"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgb(173, 173, 173)",
                fontSize: 12
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: "rgb(20,68, 82)"
              }
            }
          }
        ],
        series: [
          {
            type: "line",
            name: "平均VOC(ppm)",
            data: series_data
          }
        ],
        color: ["rgb(88, 230, 234)", "rgb(120, 191, 232)", "rgb(80, 168, 176)", "#32cd32", "rgb(78, 130, 219)",],

      };

      chart.setOption(option);
      var index = 0; //播放所在下标
      setInterval(function() {
        chart.dispatchAction({
          type:'showTip',//默认显示的提示框
          seriesIndex: 0,//这行不能省
          dataIndex: index
        });
        index++;
        if(index > 30) {
          index = 0;
        }
      }, 3000);

    },


    //控制中心
    draw(ele, val, con, max, color) {
      var w = document.documentElement.clientWidth / 80;
      document.documentElement.style.fontSize = w + 'px';
      var value = val
      var option = {
        grid: {
          left: '30%',
          top: '0',
          right: '13%',
          bottom: '0'
        },
        "xAxis": {
          type: 'value',
          "splitLine": {
            "show": false
          },
          "axisLine": {
            "show": false
          },
          "axisLabel": {
            "show": false
          },
          "axisTick": {
            "show": false
          }
        },
        "yAxis": [{
          "type": "category",
          "inverse": true,
          "data": [con],
          "axisLine": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          "axisLabel": {
            show: true,
            color: '#c1bfbf',
            fontSize: 0.63 * w,
          }
        }],
        animationEasing: 'elasticOut',
        "series": [
          {
            type: 'pictorialBar',
            data: [

              value

            ],
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: color
              }
            },
            cursor: 'pointer',
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolSize: [0.35 * w, w],

            symbol: 'roundRect',

            label: {
              show: false,
              position: 'left',

              formatter: function () {
                return con
              },
              color: '#c1bfbf',
              fontSize: 0.63 * w,
            },
            z: 800
          },
          {
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: '#193040'
              }
            },
            data: [max],
            animationDuration: 0,
            symbolRepeat: 'fixed',
            // symbolMargin: '20%',
            symbol: 'roundRect',
            symbolSize: [0.35 * w, w],
            label: {
              show: true,
              position: 'right',
              formatter: function () {
                return Math.floor(val * 90 / max) + '%'
              },
              color: '#c1bfbf',
              fontSize: 0.63 * w,
            }
          }
        ]
      };
     // chart.setOption(option)
    },

    // 中间虚线
    dashed() {

      var canvas = document.querySelector('.dashed')
      var ctx = canvas.getContext('2d')
      var w = canvas.width = document.querySelector('.total').clientWidth
      var h = canvas.height = document.querySelector('.total').clientHeight / 3 * 2
      ctx.lineWidth = 3
      ctx.setLineDash([3, 3]);
      ctx.fillStyle = '#93f8fb'
      ctx.shadowOffsetX = 0;
      // 阴影的y偏移
      ctx.shadowOffsetY = 0;
      // 阴影颜色
      ctx.shadowColor = '#93f8fb';
      // 阴影的模糊半径
      ctx.shadowBlur = 15;
      ctx.save()  //缓存初始状态
      // 绘制第一条曲线
      ctx.beginPath()
      var grd = ctx.createLinearGradient(w / 11 * 2, h / 3, w / 5 * 2, h);
      grd.addColorStop(0, "#54e2e6");
      grd.addColorStop(1, "#065261");
      ctx.strokeStyle = grd;
      ctx.moveTo(w / 5 * 2, h)
      ctx.quadraticCurveTo(w / 5, h / 6 * 5, w / 11 * 2, h / 3);
      ctx.stroke();
      // 绘制第一条曲线上的圆光效果
      ctx.beginPath()
      ctx.moveTo(w / 11 * 2, h / 3)
      ctx.arc(w / 11 * 2, h / 3, 5, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
      ctx.save()
      // 绘制第二条线
      ctx.beginPath()
      var grd = ctx.createLinearGradient(w / 11 * 3.3, h / 2, w / 3 * 1.1, h / 6 * 5);
      grd.addColorStop(0, "#e08d03");
      grd.addColorStop(1, "#2e6a5c");
      ctx.strokeStyle = grd;
      ctx.moveTo(w / 3 * 1.1, h / 6 * 5)
      ctx.quadraticCurveTo(w / 5 * 1.5, h / 6 * 4.2, w / 11 * 3.3, h / 2);
      ctx.stroke();
      // 绘制第二条曲线上的圆光效果
      ctx.beginPath()
      ctx.moveTo(w / 11 * 3.3, h / 2)
      ctx.arc(w / 11 * 3.3, h / 2, 5, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
      ctx.save()
      // 绘制第三条线
      ctx.beginPath()
      var grd = ctx.createLinearGradient(w / 3 * 1.4, h / 5, w / 5 * 2, h / 2);
      grd.addColorStop(0, "#e08d03");
      grd.addColorStop(1, "#2e6a5c");
      ctx.strokeStyle = grd;
      ctx.moveTo(w / 5 * 2, h / 2)
      ctx.quadraticCurveTo(w / 3 * 1.2, h / 4 * 1.4, w / 3 * 1.4, h / 5);
      ctx.stroke();
      // 绘制第三条曲线上的圆光效果
      ctx.beginPath()
      ctx.moveTo(w / 3 * 1.4, h / 5)
      ctx.arc(w / 3 * 1.4, h / 5, 5, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
      ctx.save()
      // 绘制第四条线
      ctx.beginPath()
      var grd = ctx.createLinearGradient(w / 5 * 3.1, h / 3 * 1.2, w / 5 * 3.2, h / 2 * 1.5);
      grd.addColorStop(0, "#e08d03");
      grd.addColorStop(1, "#2e6a5c");
      ctx.strokeStyle = grd;
      ctx.moveTo(w / 5 * 3.2, h / 2 * 1.5)
      ctx.quadraticCurveTo(w / 5 * 3.35, h / 2 * 1.2, w / 5 * 3.1, h / 3 * 1.2);
      ctx.stroke();
      // 绘制第四条曲线上的圆光效果
      ctx.beginPath()
      ctx.moveTo(w / 5 * 3.1, h / 3 * 1.2)
      ctx.arc(w / 5 * 3.1, h / 3 * 1.2, 5, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
      ctx.save()
      // 绘制第五条线
      ctx.beginPath()
      var grd = ctx.createLinearGradient(w / 5 * 3.3, h / 4, w / 5 * 3.2, h / 2 * 1.9);
      grd.addColorStop(0, "#e08d03");
      grd.addColorStop(1, "#2e6a5c");
      ctx.strokeStyle = grd;
      ctx.moveTo(w / 5 * 3.03, h / 2 * 1.9)
      ctx.quadraticCurveTo(w / 5 * 3.8, h / 2 * 1.2, w / 5 * 3.3, h / 4);
      ctx.stroke();
      // 绘制第五条曲线上的圆光效果
      ctx.beginPath()
      ctx.moveTo(w / 5 * 3.3, h / 4)
      ctx.arc(w / 5 * 3.3, h / 4, 5, 0, Math.PI * 2)
      ctx.fill()
      ctx.restore()
      ctx.save()
      // 绘制第六条线
      ctx.beginPath()
      var grd = ctx.createLinearGradient(w / 5 * 3.8, h / 2 * 1.2, w / 5 * 2.9, h);
      grd.addColorStop(0, "#e08d03");
      grd.addColorStop(1, "#2e6a5c");
      ctx.strokeStyle = grd;
      ctx.moveTo(w / 5 * 2.9, h)
      ctx.quadraticCurveTo(w / 5 * 3.7, h / 2 * 1.6, w / 5 * 3.8, h / 2 * 1.2);
      ctx.stroke();
      // 绘制第六条曲线上的圆光效果
      ctx.beginPath()
      ctx.moveTo(w / 5 * 3.8, h / 2 * 1.2)
      ctx.arc(w / 5 * 3.8, h / 2 * 1.2, 5, 0, Math.PI * 2)
      ctx.fill()
    },

    //环形图 ---(节约能源）
    ringChart(ele, percent, color1, color2) {
      // 基于准备好的dom，初始化echarts实例
      var e = percent;
      var Chart4 = this.$echarts.init(document.querySelector(ele));
      var option = {
        title: {
          show: true,
          text: e + '%',
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: '20',
            color: 'rgb(13,208,234)',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{d}%",
          show: false
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          show: true
        },
        series:
          {
            name: '',
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: [
              {value: e, name: ''},
              {value: 100 - e, name: ''}
            ]
          },
        color: [color1, color2]

      };
      Chart4.setOption(option);

    },
    //中间雨
    rainBg() {
      var c = document.querySelector(".rain");
      var ctx = c.getContext("2d");//获取canvas上下文
      var w = c.width = document.querySelector('.total').clientWidth;
      var h = c.height = document.querySelector('.total').clientHeight;

      //设置canvas宽、高

      const random = function (min, max) {
        return Math.random() * (max - min) + min;
      }

      const RainDrop = function () {
      }

      //雨滴对象 这是绘制雨滴动画的关键
      RainDrop.prototype = {
        init: function () {
          this.x = random(0, w);//雨滴的位置x
          this.y = h;//雨滴的位置y
          this.color = 'hsl(180, 100%, 50%)';//雨滴颜色 长方形的填充色
          this.vy = random(4, 5);//雨滴下落速度
          this.hit = 0;//下落的最大值
          this.size = 2;//长方形宽度
        },
        draw: function () {
          if (this.y > this.hit) {
            var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.size * 30)
            // 设置起始颜色
            linearGradient.addColorStop(0, '#14789c')
            // 设置终止颜色
            linearGradient.addColorStop(1, '#090723')
            // 设置填充样式
            ctx.fillStyle = linearGradient
            ctx.fillRect(this.x, this.y, this.size, this.size * 50);//绘制长方形，通过多次叠加长方形，形成雨滴下落效果
          }
          this.update();//更新位置
        },
        update: function () {
          if (this.y > this.hit) {
            this.y -= this.vy;//未达到底部，增加雨滴y坐标
          } else {
            this.init();
          }
        }
      };

      const resize = function () {
        w = c.width = window.innerWidth;
        h = c.height = window.innerHeight;
        console.log('xxxx'+w);
      }

      //初始化一个雨滴

      var rs = []
      for (var i = 0; i < 10; i++) {
        setTimeout(function () {
          var r = new RainDrop();
          r.init();
          rs.push(r);
        }, i * 300)
      }

      const anim =function () {
        ctx.clearRect(0, 0, w, h);//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
        for (var i = 0; i < rs.length; i++) {
          rs[i].draw();//绘制雨滴
        }
        requestAnimationFrame(anim);//控制动画帧
      }

      window.addEventListener("resize", resize);
      //启动动画
      anim();

    },





  }
}